<!-- @Author: Yu_Bo -->
<template>
	<view class="search">
		<view class="search_input">
			<u-search v-model="keyword" placeholder="输入关键词搜索" :show-action='false' @search="search"></u-search>
		</view>
		<!--  -->
		<view v-if="!listShow">
			<view class="search_info" v-if="logList.length || topList.length">
				<view class="info_title_two" v-if="logList.length">
					历史记录
					<image src="@/static/images/img/del_icon.png" mode="" @click="delSearch"></image>
				</view>
				<view class="his_list" v-if="logList.length">
					<text v-for="(item,index) in logList" :key="index" @click="searchBtn(item)">{{item}}</text>
				</view>
				<view class="info_title" v-if="topList.length">
					搜索推荐
					<image src="@/static/images/img/hot.png" mode=""></image>
				</view>
				<view class="his_list" v-if="topList.length">
					<text v-for="(item,index) in topList" :key="index" @click="searchBtn(item.content)">{{item.content}}</text>
				</view>
			</view>
		</view>
		<!--  -->
		<view class="search_list" v-if="listShow">
			<c-goodslist :list="list" :type="2"></c-goodslist>
			<!-- 无数据 -->
			<c-emptydata :type="3" v-if="list.length == 0"></c-emptydata>
			<view class="mall_loading" v-if="list.length">
				<u-loadmore :status="status" color='#999' font-size='26' />
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return{
				keyword: "",
				// 
				logList: [],
				topList: [],
				// 
				loding: false,
				listShow: false,
				list: [],
				page: 1,
				status: 'loadmore',//加载前值为loadmore，加载中为loading，没有数据为nomore
			}
		},
		computed: {},
		onLoad() {
			this.getLog()
			this.getTop()
		},
		onShow() {},
		methods: {
			getLog() {
				var that = this
				that.$httpApi.searchLog().then((res) => {
					if (res.code == 1) {
						that.logList = res.data
					}
				})
			},
			getTop() {
				var that = this
				that.$httpApi.topSearch().then((res) => {
					if (res.code == 1) {
						that.topList = res.data
					}
				})
			},
			// 删除
			delSearch() {
				var that = this
				that.$httpApi.searchDel().then((res) => {
					if (res.code == 1) {
						that.$tips.showToast(res.msg)
						that.logList = []
					}
				})
			},
			// 搜索
			search() {
				var that = this
				if(that.pages != 1) {
					that.status = 'loading'
				}
				if(that.loding) return
				that.loding = true
				var params = {
					page: that.page,
					search: this.keyword
				}
				that.$httpApi.search(params).then((res) => {
					if (res.code == 1) {
						that.listShow = true
						that.loding = false
						if(that.page == 1) {
							that.list = []
						}
						if(res.data && res.data.length == 10) {
							that.list=that.list.concat(res.data)
							that.status = "loadmore"
						} else if(res.data && res.data.length < 10) {
							that.list=that.list.concat(res.data)
							that.status = "nomore"
						} else {
							that.status = "nomore"
						}
					}
				})
			},
			searchBtn(txt) {
				this.keyword = txt
				this.page = 1
				this.search()
			},
		},
		onReachBottom(){
			 if(this.status == 'nomore' || this.status == 'loading'){
			 	return
			 }
			 this.page++
			 this.search()
		}
	}
</script>

<style lang='scss' scoped>
	.search {
		width: 100%;
		
		.search_input {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 1;
			width: 100%;
			padding: 30rpx;
			background: #ffffff;
		}
		
		.search_info {
			padding: 124rpx 30rpx 30rpx;
			
			.info_title_two {
				width: 100%;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #222222;
				display: flex;
				align-items: center;
				justify-content: space-between;
				
				image {
					display: block;
					width: 36rpx;
					height: 36rpx;
				}
			}
			
			.info_title {
				width: 100%;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #222222;
				display: flex;
				align-items: center;
				
				image {
					display: block;
					width: 24rpx;
					height: 32rpx;
					margin-left: 10rpx;
				}
			}
			
			.his_list {
				width: 100%;
				padding-top: 20rpx;
				margin-bottom: 60rpx;
				display: flex;
				flex-wrap: wrap;
				
				text {
					display: block;
					height: 60rpx;
					padding: 0 24rpx;
					margin-top: 20rpx;
					margin-right: 20rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;
					border-radius: 30rpx;
					background: #f6f6f6;
					display: flex;
					align-items: center;
				}
			}
		}
		
		.search_list {
			width: 100%;
			padding: 124rpx 30rpx 30rpx;
		}
	}
</style>